<script setup lang="ts">
import { getStockList } from '@/api/inventory'

const router = useRouter()
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const query = reactive({
  page: 1,
  pageSize: 10,
})
function onLoad() {
  loading.value = true
  getStockList(query).then((res) => {
    const totalPages = Math.ceil(res.data.total / query.pageSize)
    list.value = res.data.data
    finished.value = query.page >= totalPages
  }).finally(() => {
    loading.value = false
  })
}

function onRefresh() {
  // 清空列表数据
  finished.value = false
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  list.value = []
  refreshing.value = false
  onLoad()
}

function goEdit(id) {
  router.push({ name: 'inventory-edit', query: { id } })
}
</script>

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <template v-for="item in list" :key="item">
        <van-swipe-cell>
          <van-cell :border="false" :title="item.merchandise.name" :value="item.quantity" />
          <template #right>
            <van-button square type="primary" text="编辑" @click="goEdit(item.merchandiseId)" />
          </template>
        </van-swipe-cell>
        <van-divider class="!m-0" />
      </template>
    </van-list>
  </van-pull-refresh>
</template>

<route lang="json5">
{
  name: 'inventory',
  meta: {
    title: '查看库存',
    i18n: 'menus.inventory'
  },
}
</route>
